<template>
	<div id="mapPage" style="height: 100%;">
		<!-- <mapLeftMenu></mapLeftMenu> -->
		<!-- <div id="mapPage" style="height: 45rem;"> -->
		<div :id="id" style="width: 100%;height: 100%;"></div>
		<div v-if="config.isOpenEditor">
			<span class="handleBtns">
				<el-button plain size="mini" @click="goBackPage">返回上一页</el-button>
				<el-button type="primary" size="mini" @click="postEditor">完成编辑</el-button>
			</span>
			<el-card class="box-card cardEditor" :class="editorBox?'':'editorBox'">
				<el-form :model="editorConfig" class="demo-form-inline" size="mini" style="text-align: left;"
					label-width="90px" label-position="left">
					<div v-if="editorConfig.editorType === 'marker'">
						<el-form-item label="标注内容">
							<el-input v-model="editorConfig.content" style="width: 120px;" type="textarea" resize="none"
								:autosize="{ minRows: 15, maxRows: 15}"></el-input>
						</el-form-item>
					</div>
					<div v-else>
						<el-form-item label="线段宽度">
							<el-input v-model="editorConfig.options.weight" style="width: 120px;">
								<template slot="append">px</template>
							</el-input>
						</el-form-item>
						<el-form-item label="线段颜色">
							<el-color-picker v-model="editorConfig.options.color" :predefine="$globalData.predefineColors">
							</el-color-picker>
						</el-form-item>
						<el-form-item label="线段透明度">
							<el-slider v-model="editorConfig.options.opacity" style="width: 120px;" :min="0" :max="1"
								:step="0.1"></el-slider>
						</el-form-item>
						<el-form-item label="内部填充">
							<el-radio-group v-model="editorConfig.options.fill">
								<el-radio :label="true">是</el-radio>
								<el-radio :label="false">否</el-radio>
							</el-radio-group>
						</el-form-item>
						<div v-if="editorConfig.options.fill">
							<el-form-item label="填充颜色">
								<el-color-picker v-model="editorConfig.options.fillColor" :predefine="$globalData.predefineColors"></el-color-picker>
							</el-form-item>
							<el-form-item label="填充透明度">
								<el-slider v-model="editorConfig.options.fillOpacity" style="width: 120px;" :min="0"
									:max="1" :step="0.1"></el-slider>
							</el-form-item>
						</div>
					</div>
					<el-form-item label="自动定位">
						<el-radio-group v-model="editorConfig.isLocation">
							<el-radio :label="true">是</el-radio>
							<el-radio :label="false">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item>
						<el-button type="danger" @click="cancelEditor">取消</el-button>
						<el-button type="primary" @click="finishEditor">确定</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
		<div v-else>
			<span class="handleBtns" v-if="config.isShowEditorBtn">
				<el-button type="primary" size="mini" @click="toEditorPages">编辑地图</el-button>
			</span>
		</div>

	</div>
</template>

<script>
	// import mapLeftMenu from './mapLeftMenu.vue'
	// import bigeMap from '../../../../utils/bigeMap.js'
	// const mapConfig = {
	// 	isOpenEditor: true, // 是否打开编辑
	// 	mapUrl: 'http://localhost:9000', // 地图服务器地址
	// 	mapSource: 'bigemap.arcgis-satellite', // 地图来源
	// 	maxZoom: 18, // 最大缩放级别
	// 	zoom: 4 ,// 地图初始化缩放级别
	// 	initialCoordinates: [29.382175, 104.897461], // 初始坐标
	// 	isOpenFlyToBounds: false // 开启飞图特效
	// }
	// var map = ''
	export default {
		// ['id', 'mapHeight', 'configs', 'baseId']
		props: {
			id: {
				type: String,
				default: ''
			},
			mapHeight: {
				type: String,
				default: '100%'
			},
			configs: {
				type: Object,
				default: {}
			},
			baseId: {
				type: String,
				default: ''
			},
		},
		// components:{
		// 	mapLeftMenu
		// },
		data() {
			return {
				// mapConfig: mapConfig,
				config: {
					isOpenEditor: this.configs.isOpenEditor ? this.configs.isOpenEditor : false, // 是否打开编辑
					mapUrl: this.configs.mapUrl ? this.configs.mapUrl : 'http://59.110.54.18:3000', // 地图服务器地址
					mapSource: this.configs.mapSource ? this.configs.mapSource : 'bigemap.arcgis-satellite', // 地图来源
					maxZoom: this.configs.maxZoom ? this.configs.maxZoom : 18, // 最大缩放级别
					zoom: this.configs.zoom ? this.configs.zoom : 4, // 地图初始化缩放级别
					initialCoordinates: this.configs.initialCoordinates ? this.configs.initialCoordinates : [29.382175,
						104.897461
					], // 初始坐标
					isOpenFlyToBounds: this.configs.isOpenFlyToBounds ? this.configs.isOpenFlyToBounds : false, // 开启飞图特效
					isShowEditorBtn: this.configs.isShowEditorBtn ? this.configs.isShowEditorBtn :
					false, // 是否显示编辑按钮，显示的时候，isOpenEditor必须为true
					coverage: this.configs.coverage ? this.configs.coverage : [],
				},
				// baseid: this.baseId,
				editorConfig: {
					options: {
						clickable: true,
						color: "",
						fill: true,
						fillColor: "",
						fillOpacity: 0.2,
						opacity: 0.5,
						stroke: true,
						weight: 2
					},
					content: '', // 标注内容
					editorType: '', // 编辑类型
					isLocation: false // 是否自动定位
				},
				// options: '',
				editorBox: false,
				testData: [],
				mapDataId: '', // 获取到的地图数据id
				postUrls: '', //修改或新增地图
				// 地图是否初始化完成
				mapIsInit: false
			}
		},
		mounted() {
			// console.log(this.configs)
			// console.log(this.baseId)
			this.$BIGEMAP.loadingFunc(this.config).then(res => {
				// 初始化地图
				this.$BIGEMAP.init(this, this.id).then(res=>{
					if(res){
						this.mapIsInit = true
						// 获取地图数据
						if (this.baseId) {
							this.getDatas()
						} else {
							this.postUrls = '/api/orchard/saveCoordinate'
						}
					}
				})
				
			})
		},
		watch: {
			baseId() {
				if(this.mapIsInit){
					this.getDatas()
				}
			}
		},
		methods: {
			getDatas() {
				this.getMapsData().then(res => {
					if (res.length > 0) {
						this.postUrls = '/api/orchard/updateCoordinate'
						// 为地图渲染数据
						this.$BIGEMAP.getOriginalData(res)
					} else {
						this.postUrls = '/api/orchard/saveCoordinate'
					}
				})
			},
			toEditorPages() {
				// 打开新页面进行编辑
				// window.open('/editorMap')
				if (this.baseId) {
					// 缓存数据
					// console.log(this.$parent.cacheData())
					this.$emit('cacheData')
					// return
					// 跳转页面
					this.$router.push(`/editormap?baseId=${this.baseId}`)
				} else {
					this.$message.error('请先选择基地')
				}
				// console.log(this.baseId)
				// return
			},
			/**
			 * @param {latLng}  坐标 object {lat: 28.92163128242129, lng: 111.70898437500001} or Arry[28.92163128242129,111.70898437500001].
			 * @param {zoom}  显示级别 number
			 */
			flyingFigure(latLng, zoom) {
				// 飞图---------到指定位置
				this.$BIGEMAP.flyTo(latLng, zoom)
			},
			cancelEditor() {
				// 取消编辑
				this.$BIGEMAP.cancelEditor()
			},
			finishEditor() {
				// 完成编辑
				this.$BIGEMAP.finishEditor(this.editorConfig)
			},
			goBackPage() {
				// 返回上一页
				this.$BIGEMAP.goBackPage().then(res => {
					if (res) {
						this.$router.back()
					} else {
						this.$confirm('此地图编辑后未提交数据，确定要返回上一页?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$router.back()
						})
					}
				})
			},
			postEditor() {
				// 提交数据
				// '/api/orchard/saveCoordinate'
				// console.log(this.$store.state)
				// console.log( this.postUrls)
				// return
				if (!this.baseId) {
					this.$message.error('没有选择基地')
					return
				}
				this.$BIGEMAP.postEditor().then(res => {
					// console.log(res)
					this.$request.postJson(this.postUrls, {
						baseId: this.baseId,
						json: res,
						id: this.mapDataId,
						type: '1'
					}).then(res => {
						// console.log(res)
						if (res.code == 200) {
							this.$message.success('保存成功')
							setTimeout(() => {
								this.$router.back()
							}, 1000)
						} else {
							this.$message.error('保存失败')
						}
					}).catch(() => {
						this.$message.error('保存失败')
					})
				}).catch(e => {
					this.$confirm(e, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$router.back()
					})
				})
			},

			getMapsData() {
				return new Promise((reslove, reject) => {
					this.$request.get('/api/orchard/queryCoordinate', {
						baseId: this.baseId,
						type: '1'
					}).then(res => {
						if (res.code == 200) {
							if (res.data.enclosure) {
								let data = JSON.parse(res.data.enclosure)
								this.mapDataId = res.data.id
								// console.log(data)
								reslove(data.json)
							} else {
								this.$request.get('/api/orchard/orchardList/queryBase', {
									id: this.baseId,
									type: '1'
								}).then(res => {
									if (res.code == 200) {
										// console.log(res.data, '23123123132123')
										if (res.data.enclosure) {
											let data = JSON.parse(res.data.enclosure)
											this.mapDataId = res.data.id
											// console.log(data)
											reslove(data.json)
										} else {
											reslove([])
										}
									}
								})
								// reslove([])
							}
						}
					})
				})
			}
		},
		// destroyed() {
		// 	try{
		// 		sessionStorage.removeItem('editorMapData')
		// 	}catch(e){
		// 		//TODO handle the exception
		// 		this.$message.error('数据清楚失败')
		// 	}
		// }
	}
</script>
<style scoped="scoped">
	#mapPage {
		position: relative;
	}

	#map {
		width: 100%;
		height: 100%;
	}

	.cardEditor {
		position: absolute;
		top: 165px;
		right: 11px;
	}

	.handleBtns {
		position: absolute;
		top: 12px;
		right: 60px;
	}

	.editorBox {
		right: -300px;
	}
</style>
